<template>
    <div style="display: flex;gap: 20px;align-items: flex-start;">
        <div class="checkout_item" v-for="(item, index) in localOptions" :key="index">
            <label class="checkbox-wrap">
                <input class="input" type="checkbox" v-model="item.value" @change="onChange(item)" />
                <i class="check-icon"></i>
                <div class="check_label">{{ item.label }}</div>
            </label>
        </div>
    </div>

</template>
<script setup>
import { watch, ref } from 'vue';
const emits = defineEmits(['update:modelValue', 'change']);
const props = defineProps({
    modelValue: {
        type: [Number, String, Array],
        default: () => (undefined)
    },
    options: {
        type: Array,
        default: () => ([])
    },
    single: {
        type: Boolean,
        default: false
    }
})
const localOptions = ref([]);

watch(() => props.options, (newData) => {
    let arr = JSON.parse(JSON.stringify(newData));
    arr.forEach(item => {
        item['valuebak'] = item['value']
        if (props.modelValue instanceof Array) {
            if (props.modelValue.includes(item.value)) {
                item['checked'] = true;
                item['value'] = true;
            } else {
                item['checked'] = false;
                item['value'] = false;
            }
        } else {
            if (item.value == props.modelValue) {
                item['checked'] = true;
                item['value'] = true;
            } else {
                item['checked'] = false;
                item['value'] = false;
            }
        }
    });
    localOptions.value = arr;
}, {
    deep: true,
    immediate: true
});
watch(() => props.modelValue, (newData) => {
    if (newData) {
        return;
    }
    localOptions.value.forEach(item => {
        item['checked'] = false;
        item['value'] = false;
    })
});
const onChange = (val) => {
    if (props.single) {
        localOptions.value.forEach(item => {
            item['checked'] = false;
            item['value'] = false;
        })
        val['checked'] = true;
        val['value'] = true;
        let res = JSON.parse(JSON.stringify(val));
        res['value'] = res['valuebak'];
        delete res['valuebak'];
        emits('change', res.value, res);
        emits("update:modelValue", res.value);
    } else {
        val['checked'] = !val['checked'];
        let checked = localOptions.value.filter((item) => item['checked'] == true);
        checked = JSON.parse(JSON.stringify(checked));
        checked.forEach(item => {
            item['value'] = item['valuebak'];
            delete item['valuebak'];
        });
        let values = checked.map((item) => item.value);
        emits('change', values, checked);
        emits("update:modelValue", values);
    }

}
</script>
<style lang="scss" scoped>
.checkout_item {
    min-width: 252px;
    // display: inline-block;

    .checkbox-wrap {

        margin-right: 15px;
        font-size: 14px;
        user-select: none;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        text-wrap-mode: nowrap;

        .input {
            font-size: 28px;
        }

        .check-icon {
            font-size: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            color: #FFFFFF;
            border-radius: 4px;
            border: 2px solid #2E988E;
            background: rgba(33, 224, 197, 0.12);
            position: relative;
        }

        input[type='checkbox'] {
            display: none;
        }

        input[type='checkbox']:checked+.check-icon::after {
            content: '';
            background-image: url('../assets/images/icon_checked.png');
            background-size: 100% 100%;
            width: 38px;
            height: 24px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .check_label {
            color: #FFF;
            font-size: 28px;
            margin-left: 13px;
        }

        // input[type='checkbox']:checked~.check_label {
        //     color: #2E988E;
        // }
    }
}
</style>